<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
            padding: 0;

        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

</head>
<body>
<div id="app">
    <div :data="doctor" >
        <img  :src="doctorArr[0].headImgURL" class="avatar" style="width: 200px;height: 200px;" style="float: left;">
        <el-button type="primary" @click="getAvatar(doctor.iid)">修改头像</el-button>
    </div>
    <el-descriptions title="医生信息" style="width: 1200px;float: right;margin: -220px  -150px;" v-for="(d,i) in doctorArr">
        <el-descriptions-item label="姓名" >{{d.name}}</el-descriptions-item>
        <el-descriptions-item label="年龄" >{{d.age}}</el-descriptions-item>
        <el-descriptions-item label="性别" >{{d.sex}}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{d.telephone}}</el-descriptions-item>
        <el-descriptions-item label="地址" >{{d.address}}</el-descriptions-item>
        <el-descriptions-item label="职称" >{{d.post.pname}}</el-descriptions-item>
        <el-descriptions-item label="科室" >{{d.kes.kname}}</el-descriptions-item>
    </el-descriptions>

        医生介绍:
        <el-input   placeholder="请输入内容" v-model="doctor.resume" name="resume"></el-input>
        生涯:
        <el-input   placeholder="请输入内容" v-model="doctor.career" name="career"></el-input>
        特长:
        <el-input   placeholder="请输入内容" v-model="doctor.major" name="major" ></el-input>

        <el-button   type="primary" plain @click="submitResume(doctor.iid)">提交简历</el-button>
        <!--<el-button type="primary" plain >返回页面</el-button>-->

    <el-dialog  title="更改头像" :visible.sync="dialogFormVisible"  width="300px">
        <el-form id="doctorFrom" :model="avatar">
            <el-form-item  >
                <input v-model="avatar.id" name="id" type="text" value="" style="display:none" align="center">
            </el-form-item>
            <el-form-item >
                <img  :src="avatar.headImgURL" id="doctorImg" style="width: 200px;height: 200px;" align="center">
                <input @change="chengImg()" id="foo"    type="file" name="headImg" align="center"/>
            </el-form-item>
        </el-form>
                <el-button type="primary" @click="updateAvatar()">提交</el-button>
                <el-button @click="dialogFormVisible=true">取消</el-button>
    </el-dialog>
</div>
<script>
    var id = window.location.href.split("=")[1];

    $.get("/ssm/resume/getADoctor/"+id,function (backData) {
        zz.doctorArr=backData.data;
        $.get("/ssm/resume/getId/"+id,function (backData) {
            zz.doctor.iid=backData.data
        })
    });
    var zz = new Vue({
        el:"#app",
        data:{

            doctor:{},
            doctorArr:{},
            textarea:[],
            // imageUrl:'',
            dialogFormVisible:false,
            formLabelWidth: '120px',
            avatar:{},
        },
        methods:{
            chengImg(){
                var  r = new FileReader();
                r.readAsDataURL(foo.files[0]);
                r.onload = function () {
                    doctorImg.src = r.result;
                }
            },
            submitResume(id){
                 $.post("/ssm/resume/addResume",zz.doctor,function (backData) {
                        if (backData.code === 1){
                            zz.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                        }
                     window.location.href="/ssm/doctors/doctorResume.html?id="+id;
                 })
            },
            getAvatar(id){
                $.get("/ssm/resume/getAvatar/"+id,function (backData) {
                    zz.avatar=backData.data;
                    zz.dialogFormVisible = true;
                })
            },
            updateAvatar(){
                 var doctorData = new FormData(doctorFrom);

                 $.ajax({
                      url: "/ssm/resume/updateAvatar",
                      type: "POST",
                      data: doctorData,
                      processData: false,
                      contentType: false,
                      success: function (backData) {
                          getData(id)
                      }
                 });
                zz.dialogFormVisible = false;
                window.location.reload()
            },
        },

    });
    function getData(id) {
        $.get("/ssm/resume/getADoctor/"+id,function (backData) {
            zz.doctorArr = backData.data;
            window.location.reload()
        })
    }
</script>
</body>
</html>